<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knowledge Library</title>
    <script src="web/javascript/jquery-3.7.1.min.js"></script>
    <style>
        /* 样式设置 */
        .container {
            display: flex;
            justify-content: space-between;
        }
        .sidebar {
            width: 200px;
            padding: 10px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .folder {
            position: relative;
            margin-bottom: 5px;
            cursor: pointer;
            background-color: #f4f4f4;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 1px 1px 2px #888;
        }
        .file {
            position: relative;
            margin-bottom: 5px;
            cursor: pointer;
            background-color: #e0e0e0;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 1px 1px 2px #888;
            padding-left: 15px;
        }
        .file.active {
            background-color: #cdeccd; /* 点击后的底色变为绿色 */
        }
        .nested {
            display: none;
            padding-left: 20px;
        }
        .active {
            display: block;
        }
        .caret::before {
            position: absolute;
            left: 5px;
            color: #888888;
        }
        .caret-down::before {
            position: absolute;
            left: 5px;
            color: #888888;
        }
    </style>
</head>
    <body>
        <div class="container">
            <div class="sidebar">
                <ul id="myDirectory">
                    <li class="folder caret">Folder 1
                        <ul class="nested">
                            <li class="file">File 1</li>
                            <li class="file">File 2</li>
                            <li class="folder caret">Sub-folder 1
                                <ul class="nested">
                                    <li class="file">Sub-file 1</li>
                                    <li class="file">Sub-file 2</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="folder caret">Folder 2
                        <ul class="nested">
                            <li class="file">File 3</li>
                            <li class="file">File 4</li>
                            <li class="folder caret">Sub-folder 2
                                <ul class="nested">
                                    <li class="file">Sub-file 3</li>
                                    <li class="file">Sub-file 4</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="file_content" class="file_content">
                <!-- 其他页面内容 -->
            </div>
        </div>

        <script>

            // 将 JSON 数据构造为 HTML 结构
            function constructNestedList(parent, data) {
                // 遍历 JSON 数据
                data.forEach(item => {
                    const li = document.createElement('li');
                    li.addEventListener('click', bar_on_click);
                    
                    if (Array.isArray(item)) {
                        li.setAttribute("class", "folder caret");
                        
                        const ul = document.createElement('ul');
                        ul.setAttribute("class", "nested");
                        ul.textContent = "Folder";
                        ul.addEventListener('click', bar_on_click);
                        constructNestedList(ul, item);
                        
                        li.appendChild(ul);
                    } else {
                        li.setAttribute("class", "file");
                        li.textContent = item;
                    }
                    
                    parent.appendChild(li);
                });
            }
            function bar_on_click() {
                // 阻止事件冒泡
                event.stopPropagation();
                
                let isFile = this.classList.contains('file');
                // 如果点击的是文件，切换底色，展示文件，不影响折叠状态
                if (isFile) {
                    this.classList.toggle('active');
                    var file_path = this.textContent;
                    $.ajax({
                        type: "POST",
                        url: "/knowledgelib_view_file",
                        data: { "file_path": file_path },
                        success: function(data) {
                            $("#file_content").html(data);
                        }
                    });
                }

                let nested = this.querySelector('.nested');
                if (nested) {
                    // 如果点击的是文件夹，切换折叠状态
                    this.classList.toggle('caret-down');
                    nested.classList.toggle('active');
                }

                // 遍历父级元素，确保其他同级元素状态正确
                let siblings = Array.from(this.parentElement.children).filter(e => e !== this);
                siblings.forEach(sibling => {
                    sibling.classList.remove('active');
                    let sNested = sibling.querySelector('.nested');
                    if (sNested) {
                        sibling.classList.remove('caret-down');
                        sNested.classList.remove('active');
                    }
                });
            }
            fetch('/knowledgelib_view_file_list')
                .then(response => response.json())
                .then(data => {
                    constructNestedList(document.getElementById('myDirectory'), data);
                })
                .catch(error => console.error('Error:', error));
        </script>
    </body>
</html>
